<template>
  <template v-if="user">
    <van-cell title="头像" is-link>
      <van-image
          width="5rem"
          height="5rem"
          round
          :src="user.avatarUrl"
      />
    </van-cell>
    <van-cell title="昵称" is-link :value="user.userName" @click="doEdit(user.id, 'userName', '昵称', user.userName)"/>
    <van-cell title="账号" is-link :value="user.loginAccount"/>
    <van-cell title="性别" is-link @click="doEdit(user.id, 'gender', '性别', user.gender)">
      <template v-if="user.gender === 1 ">男</template>
      <template v-if="user.gender === 2 ">女</template>
    </van-cell>
    <van-cell title="电话" is-link :value="user.phone" @click="doEdit(user.id, 'phone', '电话', user.phone)"/>
    <van-cell title="邮箱" is-link :value="user.email" @click="doEdit(user.id, 'email', '邮箱', user.email)"/>
    <van-cell title="个人简介" is-link :value="user.profile"
              @click="doEdit(user.id, 'profile', '个人简介', user.profile)"/>
    <van-cell title="星球编号" is-link :value="user.planetCode"/>
    <van-cell title="注册时间" is-link :value="user.createTime"/>
  </template>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../api/user"

const user = ref();

const router = useRouter();

onMounted(async () => {
  user.value = await getCurrentUser();
})

const doEdit = (userId: number, editKey: string, editName: string, currentValue: string | number) => {
  if (editKey === 'gender') {
    if (currentValue === 1) {
      currentValue = "男"
    } else {
      currentValue = "女"
    }
  }

  router.push({
    path: '/user/edit',
    query: {
      userId,
      editKey,
      editName,
      currentValue
    }
  })
};


</script>

<style scoped>

</style>